<template>
	<view>
		<view :class="{dpn: isShowSearch}">
			<uni-nav-bar fixed :status-bar="true" @clickRight="goPlay">
				<block slot="left">
					<block>
						<!-- #ifdef MP-WEIXIN -->
						<image class="top-img" src="/static/image/mine/r.png" @click="goPlay"></image>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<image class="top-img pl10" src="/static/image/search/6.png" @click="goCloud"></image>
						<!-- #endif -->
					</block>
				</block>
				<view class="top-search flex-box" @click="openSearch">
					<image class="search-icon" src="/static/image/search/2.png"></image>
					{{ searchTxt }}
				</view>
				<!-- #ifdef APP-PLUS || H5 -->
				<block slot="right" v-if="isShowPlay">
					<image class="top-img pr10" src="/static/image/mine/r.png"></image>
				</block>
				<!-- #endif -->
			</uni-nav-bar>
			<view class="page-content">
				<mescroll-uni ref="mescroll" :fixed="false" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
					<view class="banner">
						<swiper
							class="swiper"
							:autoplay="true"
							:indicator-dots="true"
							indicator-active-color="#ff372b"
							indicator-color="rgba(255,255,255, .5)"
							duration="400"
							:circular="true"
						>
							<swiper-item v-for="(item, index) in swiper" :key="index">
								<view class="item">
									<image :src="item.imageUrl + $imgSuffix" class="img"></image>
									<view class="tag">{{ item.typeTitle }}</view>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<!-- 主入口 -->
					<view class="main-bar flex-box">
						<view class="flex-item" v-for="(item, index) in contentBar" :key="index" @click="goUrl(item)">
							<image :src="'/static/image/index/t_' + (index + 1) + '.png'" class="img"></image>
							<view>{{ item.name }}</view>
							<view v-if="index == 0" class="date">{{ curDate }}</view>
						</view>
					</view>
					<!-- 歌单分类块 -->
					<songList title="推荐歌单" :list="recommendSongs" />
					<!-- 歌单分类块 -->
					<view class="song-list">
						<view class="tit-bar">
							推荐歌单
							<view class="more fr">歌单广场</view>
						</view>
						<scroll-view class="scroll-view" scroll-x>
							<navigator class="item" v-for="(item, index) in recommendSongs" :key="index" hover-class="none" :url="'/pages/subpages/index/album?item='+ encodeURIComponent(JSON.stringify(item))">
								<image class="img" :src="item.picUrl + $imgSuffix"></image>
								<view class="desc ellipsis">{{ item.name }}</view>
								<view class="count">{{ item.playCount }}</view>
							</navigator>
						</scroll-view>
					</view>
					<!-- 歌单分类块 -->
					<view class="song-list">
						<view class="switch-line flex-box">
							<view class="flex-box">
								<view class="switch-item" :class="{ on: newType == 1 }" @click="switchTab(1)">新碟</view>
								|
								<view class="switch-item" :class="{ on: newType == 2 }" @click="switchTab(2)">新歌</view>
							</view>
							<template v-if="newType == 1">
								<view class="more">更多新碟</view>
							</template>
							<template v-if="newType == 2">
								<view class="more">新歌推荐</view>
							</template>
						</view>
						<scroll-view class="scroll-view" scroll-x>
							<view class="item" v-for="(item, index) in latestAlbum" :key="index">
								<image class="img" :src="item.picUrl + $imgSuffix"></image>
								<view class="desc ellipsis">{{ item.name }}</view>
								<view class="desc ellipsis c9">{{ item.artist.name }}</view>
							</view>
						</scroll-view>
					</view>
					<!-- 歌单分类块 -->
					<view class="video-list song-list">
						<view class="tit-bar">
							精选视频
							<view class="more fr">更多></view>
						</view>
						<view class="video-item" v-for="(item, index) in relatedVideo" :key="index">
							<image class="img" :src="item.coverUrl + $imgSuffix"></image>
							<view class="desc ellipsis">{{ item.title }}</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
		<search ref="search" @close="closeSearch"></search>
	</view>
</template>
<script>
import { mapState } from 'vuex';
import { apiGetBanner, apiGetRecommendSongs, apiGetIndexData, apiGetTopAlbum, apiGetRelatedVideo, apiGetHotList } from '@/apis/index.js';
import songList from '@/components/songList.vue';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
import search from '@/components/search.vue';
export default {
	components: {
		uniNavBar,
		MescrollUni,
		songList,
		search
	},
	data() {
		return {
			searchTxt: '周杰伦',
			isShowSearch: false,
			// 下拉刷新的常用配置
			downOption: {
				auto: false //是否在初始化后,自动执行下拉回调callback; 默认true
			},
			// 上拉加载的常用配置
			upOption: {
				auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量,默认10
				},
			},
			swiper: [],
			curDate: '',
			contentBar: [{ name: '每日推荐' }, { name: '歌单' }, { name: '排行榜' , url: '/pages/subpages/index/rank'}, { name: '电台' }, { name: '直播' }],
			recommendSongs: [],
			newType: 1, // 新歌新碟
			latestTempAlbum: [],
			latestAlbum: [],
			relatedVideo: [],
			hotList: [],
			isShowPlay: false
		};
	},
	onLoad() {
		this.getBanner();
		this.getRecommendSongs();
		this.getLatestAlbum();
		this.getRelatedVideo();
		this.getHotList();

		this.curDate = new Date().getDate();
		
		// 公共设置图标
		this.$pubFuc.setTabBarBadge(0)
	},
	onShow() {
		this.isShowPlay = this.playList.list.length > 0
	},
	computed: {
		...mapState(['playList'])
	},
	methods: {
		// 获取轮播图
		getBanner() {
			apiGetBanner().then(res => {
				this.swiper = res.banners;
			});
		},
		// 获取推荐歌单
		getRecommendSongs() {
			const params = {
				limit: 6
			};
			apiGetRecommendSongs(params).then(res => {
				// 格式化播放量数据
				const formatCount = data => {
					let tempNum = data;
					if (data > 100000) {
						tempNum = parseInt(data / 10000) + '万';
					}

					return tempNum;
				};

				this.recommendSongs = res.result;

				this.recommendSongs.forEach(item => {
					item.playCount = formatCount(item.playCount);
				});
			});
		},
		// 切换新碟新歌
		switchTab(type) {
			this.newType = type;
			let temp = {
				s: type == 1 ? 0 : 3,
				e: type == 1 ? 3 : 6
			};
			this.latestAlbum = this.latestTempAlbum.slice(temp.s, temp.e);
		},
		// 获取新碟
		getLatestAlbum() {
			apiGetTopAlbum().then(res => {
				this.latestTempAlbum = res.albums;
				this.latestAlbum = res.albums.slice(0, 3);
			});
		},
		// 获取相关视频
		getRelatedVideo() {
			const params = {
				id: 6524
			};
			apiGetRelatedVideo(params).then(res => {
				this.relatedVideo = res.data;
			});
		},
		// 获取相关视频
		getList(pageNum, pageSize, successCallback, errorCallback) {
			const params = {
				id: 4571 + pageNum,
				pageNum,
				pageSize,
			}
			apiGetRelatedVideo(params).then(res => {
				//联网成功的回调
				successCallback && successCallback(res.data);
			}, res => {
				//联网失败的回调
				errorCallback && errorCallback();
			})
		},
		// hot 列表
		getHotList() {
			const params = {
				limit: 10,
				order: 'hot'
			};
			apiGetHotList(params).then(res => {
				this.hotList = res.playlists;
			});
		},
		// 打开搜索
		openSearch() {
			this.isShowSearch = true;
			this.$refs.search.open()
		},
		// 关闭搜索
		closeSearch() {
			this.isShowSearch = false;
		},
		/*下拉刷新的回调 */
		downCallback(mescroll) {
			mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
		},
		/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
		upCallback(mescroll) {
			//联网加载数据
			this.getList(mescroll.num, mescroll.size, (res) => {
				//设置列表数据
				if(mescroll.num == 1) this.relatedVideo = []; //如果是第一页需手动置空列表
				
				this.relatedVideo = this.relatedVideo.concat(res)
				
				// 后台接口有返回列表的总数据量 totalSize
				// mescroll.endBySize(10, 50); //必传参数(当前页的数据个数, 总数据量)
				mescroll.endSuccess();
			}, () => {
				//联网失败的回调,隐藏下拉刷新的状态
				mescroll.endErr();
			})
		},
		goCloud () {
			uni.showToast({
				icon: 'none',
				title: '功能未开发',
			});
		},
		// 链接跳转
		goUrl(item) {
			if (!item.url) {
				this.goCloud()
				return false;
			}
			uni.navigateTo({
				url: item.url
			})
		},
		// 去播放
		goPlay () {
			if (!this.playList.list.length) {
				uni.showToast({
					icon: 'none',
					title: '播放列表还未有歌曲',
				});
				return
			}
			uni.navigateTo({
				url: '/pages/subpages/index/play?go=1'
			})
		}
	}
};
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.pl10{
	padding-left: 20rpx;
}
.pr10{
	padding-right:20rpx;
}
.dpn{
	display: none;
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}
.top-search {
	width: 560rpx;
	/* #ifdef MP-WEIXIN */
	flex:none;
	width: 460rpx;
	margin-left:-60rpx;
	/* #endif */
	height: 72rpx;
	margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}
.banner {
	width: 100%;
	height: 268rpx;
	margin: 30rpx auto 44rpx;
	.swiper {
		height: 268rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 268rpx;
		margin: 0 auto;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}

	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}

	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>
